<template>
  <view class="container">
    <!-- 头部背景图 -->
    <image src="/sub_shop/static/images/swiperbgc.png" mode="" class="swiperbgc"></image>
    <!-- 头部搜索组件 -->
    <headerCom style="position: absolute; top: 50rpx">
      <template #sort>
        <image src="/sub_shop/static/images/sort.png" mode="" style="width: 38rpx; height: 38rpx; margin-left: 100rpx"></image>
      </template>
    </headerCom>
    <!-- 轮播图区域 -->
    <swiper class="swiperbox" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="1000">
      <swiper-item>
        <image src="/sub_shop/static/images/swiper1.png" mode="" style="width: 100%; height: 100%"></image>
      </swiper-item>
    </swiper>
    <!-- 店铺信息标题 -->
    <view class="shopinfobox">
      <view style="margin-right: 32rpx">
        <view class="shopname">山水小筑蜀之味旗舰店</view>
        <view class="shopplace">郑州市金水区建设路132号院交叉口向北50米 路西一楼店铺</view>
        <view class="shopanouncement" @click="goanouncement">
          店铺公告标题名称名称
          <uni-icons type="right" size="10"></uni-icons>
        </view>
      </view>
      <view>
        <view class="siliao">
          <image src="../static/message.png" style="width: 40rpx; height: 40rpx; vertical-align: middle"></image>
          私聊
        </view>
        <view class="callphone">
          <image src="../static/phone.png" style="width: 40rpx; height: 40rpx; vertical-align: middle"></image>
          电话
        </view>
      </view>
    </view>
    <!-- 分类 -->
    <scroll-view scroll-x class="scrool" scroll-with-animation="true">
      <view :class="{ item: true, common: checktype == index }" v-for="(item, index) in goodstype" :key="index" @click="checktype = index">{{ item }}</view>
    </scroll-view>
    <!--商品模块 -->
    <view class="goods">
      <view class="goodsitem" v-for="index in 7" :key="index">
        <image src="../../static/image/download/code.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">Apple 苹果 IPone14ProApple 苹果 IPone14Pr</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
export default {
  components: {
    headerCom,
    footerCom
  },
  data() {
    return {
      goodstype: ['全部', '奶粉', '夹克', '手机', '纸尿裤', '全部', '奶粉', '夹克', '手机', '纸尿裤'],
      checktype: 0
    };
  },
  methods: {
    goanouncement() {
      uni.navigateTo({
        url: '/sub_goodstype/shopanouncement/shopanouncement'
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .swiperbgc {
    width: 750rpx;
    height: 176rpx;
  }
  .swiperbox {
    width: 750rpx;
    height: 440rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .shopinfobox {
    display: flex;
    box-sizing: border-box;
    margin: 28rpx 30rpx;
    .shopname {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #222222;
    }
    .shopplace {
      width: 520rpx;
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #222222;
    }
    .shopanouncement {
      font-size: 26rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #222222;
    }
    .siliao {
      width: 144rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      font-size: 26rpx;
      color: #fff;
      background: linear-gradient(133deg, #f11f1f 0%, #ee6d6d 100%);
      border-radius: 46rpx 46rpx 46rpx 46rpx;
    }
    .callphone {
      width: 144rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      margin-top: 12rpx;
      border-radius: 46rpx 46rpx 46rpx 46rpx;
      border: 2rpx solid #f12525;
    }
  }
  .scrool {
    width: 100%;
    white-space: nowrap;
    height: 60rpx;
    display: flex;
    padding-left: 30rpx;
    .item {
      display: inline-block;
      font-size: 28rpx;
      padding-bottom: 10rpx;
      margin-right: 60rpx;
    }
    .common {
      font-size: 30rpx;
      color: #f02525;
      border-bottom: 4rpx solid #f02525;
    }
  }
  .goods {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .goodsitem {
      width: 340rpx;
      height: 460rpx;
      margin-left: 26rpx;
      margin-bottom: 20rpx;
      .goodsitemimage {
        width: 340rpx;
        height: 340rpx;
      }
      .goodsinfo {
        width: 340rpx;
        height: 120rpx;
        .goodsname {
          font-size: 28rpx;
        }
        .singe-line {
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
